<!--配送商端-销售管理-寄售补货需求订单列表-->
<template>
  <div class="replenishment-list">
    <el-container class="container-box">
      <div class="tabs-box">
        <tabs
          :tabs-arr="replenishmentTabs"
          @returnIndex="handleTabChange" />
      </div>
      <!-- 搜索查询 -->
      <el-header height="auto">
        <SearchForm
          show-collapse
          :label-width="'140px'"
          :data="replenishmentOrderSearchForm"
          ref="replenishmentOrderSearchForm"
          :compact-data="compactSearchForm"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        />
      </el-header>

      <!-- 列表模块 -->
      <el-editable
        v-loading="tableLoading"
        :data="replenishmentOrderList"
        height="400"
        :custom-attr="$TABLE_HEAD['beforeSettle.distributorSide.salesManagement.replenishmentOrder']"
        :columns="replenishmentOrderColumns"
      >
        <!-- 操作列 -->
        <template
          slot="default-action"
          slot-scope="{row}">
          <!--操作记录本次版本不做所以先隐藏-->
          <!-- <el-button
            size="small"
            @click.stop="handleOperateRecord(row)"
            type="text text-primary">操作记录</el-button> -->
          <el-button
            size="small"
            @click.stop="goDeliverGoods(row)"
            v-if="row.orderStatus === 2 || row.orderStatus === 9 || row.orderStatus === 3"
            type="text text-primary">发货</el-button>
          <el-button
            size="small"
            v-if="row.orderStatus === 1"
            @click.stop="handleConfirmOrder(row)"
            type="text text-primary">确认订单</el-button>
          <el-button
            size="small"
            @click.stop="jumpDetailPage(row)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
      <!--操作记录弹窗-->
      <operate-record-dialog
        :show.sync="operateRecordDialogVisible"
        :operate-data="operateRecordTableData"
        :loading="operateRecordLoading"
      />
    </el-container>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable/index.vue'
import SearchForm from '@components/businesscomponents/search'
import tabs from '@components/tabs/index.vue'
import OperateRecordDialog from '@/moduleComponents/beforeSettle/distributorSide/salesManagement/operateRecordDialog'

import { REPLENISHMENT_ORDER_STATUS, SEARCH_FORM, ORDER_COLUMNS } from './const.js'
import { isObject, cloneDeep, hasIn } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import { replenishmentOrderList, confirmOrder } from '@const/beforeSettleApi'
export default {
  name: 'SaleList',
  components: { tabs, ElEditable, SearchForm, OperateRecordDialog },

  data () {
    return {
      submitLoading: false,
      replenishmentOrderSearchForm: SEARCH_FORM, // 查询条件
      orderStatusAmount: { // TODO后端还未提供接口
        voucherStatusNotConfirm: 1,
        voucherStatusNotDelivery: 2,
        voucherStatusPartialShipment: 3,
        voucherStatusAllShipment: 9
      }, // tab状态数量
      currrentTabOrderStatus: '',
      // table列表配置信息
      tableLoading: false,
      replenishmentOrderList: [],
      replenishmentOrderColumns: ORDER_COLUMNS, // table列表表头
      selectedData: [],
      // 分页配置信息
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      // 操作记录弹窗配置信息
      operateRecordDialogVisible: false,
      operateRecordTableData: [],
      operateRecordLoading: false
    }
  },
  computed: {
    replenishmentTabs () {
      let tabs = REPLENISHMENT_ORDER_STATUS.map(item => {
        return {
          lab: item.label,
          badge: { value: '' }
          // badge: { value: this.orderStatusAmount[item.value] }
        }
      })
      const tabAll = {
        lab: '全部',
        badge: { value: '' }
      }
      tabs.unshift(tabAll)
      return tabs
    },
    compactSearchForm () {
      return this.replenishmentOrderSearchForm.slice(0, 2)
    },
    selectedIds () {
      return this.selectedData.map(it => it.id)
    }
  },
  mounted () {
    this.getReplenishmentOrderList()
  },
  methods: {
    handleTabChange (index) {
      this.currrentTabOrderStatus = index > 0 ? index : ''// 当前tab状态
      const params = {
        orderStatus: this.currrentTabOrderStatus
      }
      this.getReplenishmentOrderList(params)
    },
    getOrderStatusAmount () {
      // 获取订单tab状态数量
    },
    searchForm (condition) {
      this.getReplenishmentOrderList(condition)
    },
    resetForm (condition) {
      this.curPage = 1
      this.getReplenishmentOrderList(condition)
    },
    getReplenishmentOrderList (params) {
      this.tableLoading = true
      this.submitLoading = true
      this.$axios.post(replenishmentOrderList, {
        page: this.curPage,
        pageSize: this.pageSize,
        orderStatus: this.currrentTabOrderStatus,
        orderType: 1,
        ...params
      }).then(({ data }) => {
        if (Number(data.code) !== 0) return
        this.replenishmentOrderList = hasIn(data, ['payload', 'content']) ? data.payload.content : []
        this.totalElements = data.payload.totalElements
      }).catch(e => {}).finally(() => {
        this.tableLoading = false
        this.submitLoading = false
      })
    },
    handleConfirmOrder (row) {
      this.$confirm(`确定${row.orderCode || ''}订单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action !== 'confirm') return done()
          instance.confirmButtonLoading = true
          this.$axios.post(confirmOrder, {
            id: row.id,
            state: true
          })
            .then(({ data }) => {
              if (Number(data.code) !== 0) return
              done()
              this.getReplenishmentOrderList()
              this.getOrderStatusAmount()
              this.$message.success('操作成功')
            })
            .finally(e => {
              instance.confirmButtonLoading = false
            })
        }
      }).catch(e => {
      })
    },
    handleOperateRecord (row) {
      // 操作记录弹窗本次版本不做
      this.operateRecordDialogVisible = true
    },
    goDeliverGoods (row) {
      const path = '/distributorSide/salesManagement/replenishmentOrder/deliverGoods'
      const query = {
        id: row.id,
        needPurhcaseId: row.needPurhcaseId
      }
      this.$router.push({ path, query })
    },
    jumpDetailPage (row) {
      const path = '/distributorSide/salesManagement/replenishmentOrder/detail'
      const query = {
        id: row.id,
        orderStatus: row.orderStatus
      }
      this.$router.push({ path, query })
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getReplenishmentOrderList()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getReplenishmentOrderList()
    }
  }
}
</script>

<style lang="less">
.replenishment-list {
  .container-box {
    height: 100%;
    overflow: auto;

    .btn-box {
      margin: 12px;
    }

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
</style>
